<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>群体感知写作</title>
<link href="/pad/resources/css/bootstrap.min.css" rel="stylesheet">
<link href="./resources/css/star-rating.min.css" rel="stylesheet">
<link href="/pad/resources/css/style.css" rel="stylesheet">
</head>
<body>
	<nav class="navbar navbar-blue navbar-fixed-top" role="navigation">
		<div class="container bs-docs-container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
					<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<h1>Pad</h1>
			</div>
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">课程列表</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown"><a id="user" href="#" class="dropdown-toggle" data-toggle="dropdown">用户 <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="/pad/logout">退出登录</a></li>
					</ul></li>
			</ul>
		</div>
	</nav>
	<div class="container bs-docs-container">
		<div>
			<div id="pingfen"></div>
			<iframe id="editpad" src='#' width="100%" height="300" frameborder="no" border="0"></iframe>
		</div>
	</div>
	<script src="/pad/resources/js/jquery.min.js"></script>
	<script src="/pad/resources/js/jquery.form.min.js"></script>
	<script src="/pad/resources/js/bootstrap.min.js"></script>
	<script src="/pad/resources/js/star-rating.min.js"></script>
	<script>
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}
		$.ajax({
			url : '/pad/getSessionUser',
			success : function(user) {
				$.ajax({
					url : '/pad/assignment/getAssignmentPadCurrentId?assignmentId='
							+ getQueryString('assignmentId'),
					success : function(data) {
						$("#editpad").attr("height", $(window).height() - 130);
						$("#editpad").attr(
								"src",
								"http://localhost:8081/p/" + data.id
										+ "?userName=" + user.realname);
					}
				});
				$("#user").html(user.realname);
				$.ajax({
					url : '/pad/comment/getCommentQuestions?assignmentId='+getQueryString('assignmentId'),
					success : function(data) {
						var htmlStr = "";
						var userList = data.comment;
						for(var i in userList){
							htmlStr += '<button class="btn btn-info" data-toggle="modal" data-target="#commentModal'+i+'">给'+userList[i].userName+'评分</button> ';
							commentModal("commentModal"+i,user.id,data.assignmentPadId,userList[i]);
						}
						$('#pingfen').html(htmlStr);
					}
				});
			}
		});
		function commentModal(modalId,commenterId,assignmentPadId,user){
			var commentModal ='<div id="'+modalId+'" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">';
			commentModal +='<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>';
			commentModal +='<h4 class="modal-title" id="myModalLabel">给'+user.userName+'评分</h4></div><div class="modal-body">';
			var questionList = user.commentQuestion;
			for(var i in questionList){
				commentModal +='<form role="form" action="/pad/comment/saveOrUpdateComment">';
				commentModal +='<input type="hidden" name="questionId" value="'+questionList[i].id+'">';
				commentModal +='<input type="hidden" name="commenterId" value="'+commenterId+'">';
				commentModal +='<input type="hidden" name="assignmentPadId" value="'+assignmentPadId+'">';
				commentModal +='<input type="hidden" name="authorId" value="'+user.userId+'">';
				commentModal +='<div class="form-group">';
				commentModal +='<label>'+questionList[i].question+'</label>';
				commentModal +='<input type="text" name="score" class="form-control rating">';
				commentModal +='</div>';
				commentModal +='</form>';
			}
			commentModal +='</div>';
			commentModal +='<div class="modal-footer">';
			commentModal +='<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>';
			commentModal +='<button type="button" class="btn btn-info" onclick="submitForm(\'#'+modalId+'\');">提交</button>';
			commentModal +='</div>';
			commentModal +='</div>';
			commentModal +='</div>';
			commentModal +='</div>';
			var assignmentModal = $("#"+modalId);
			if(assignmentModal.length>0)
				assignmentModal.replaceWith(commentModal);
			else
				$("html").append(commentModal);
			$('.rating').rating({
				step:1
			});
		}
		function submitForm(modalSelecter){
			// 异步提交表单
			$(modalSelecter).find('form').each(function(){
			    $(this).ajaxSubmit({  
			        type:'post',
			        resetForm: true,
			        success:function(data){ 
			        	if(data=='success'){
			        		$(modalSelecter).modal('hide');
			        	}else{
			        		alert(data);
			        	}
			        },
			        error:function(msg){
			        	alert(msg.statusText);
			        }
			    });  
			});
		}
	</script>
</body>
</html>
